<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
	</style>
</head>

<body>
	<div id='app'>
		<a v-bind:href='url'>点我</a>
		<a :href='url'>点我</a>
		<img :src='img' alt='图片'/>
		<span :class='className'></span>
		<span :class='{active: isActive}'></span>
	</div>
	<script src='../lib/vue.js'></script>
	<script src='./app.js'></script>
	<script>
		// v-bind 用来将 元素属性 和 vue data 中的 key 绑定
		// v-bind:后面接元素原有的属性, 简写直接 :后添加
		// :class='{active: isActive} 表达的意思是当data中isActive的值为true时才为span添加名为active的class, 非常人性化
		// 并且vue是双向绑定, 只要data中的数据一修改就会实时反映到页面上
	</script>
</body>

</html>